<template>
   <ul class="commoditiesList clearfix">
                <li v-for="(item,index) in this.dataList" :key="index" @click="goDetails(item)">
                    <a >
                      <img :src="item.image">
                    </a>
                    <div v-if="item.title">
                        <p class="title">{{item.title}}</p>
                        <div class="token">
                            <span class="skyCat">天猫</span>
                            <span>包邮</span>
                        </div>
                        <p class="price">
                            ￥ {{item.price}}
                        </p>
                        <div class="number">
                            <span>
                                {{item.saleNum}}人已买
                            </span>
                            <span class="coupon" v-if="item.couponValue">
                                {{item.couponValue}}
                            </span>
                        </div>
                    </div>
                </li>
            </ul>
</template>
<script>
import axios from 'axios'
import { mapMutations, mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['InputValue', 'isEnd', 'dataList'])
  },
  mounted () {
    axios.get(`http://quan.lukou.com/api/search?word=${this.InputValue}&start=0&sort=0&couponOnly=NaN&minPrice=0&maxPrice=99999`).then(res => {
      // console.log(res.data.data.list)
      res.data.data.list.forEach(item => {
        if (item.saleNum >= 10000) {
          item.saleNum = (item.saleNum / 10000).toFixed(1) + '万'
        }
      })
      this.setDataList(res.data.data.list)
      this.modifyIsEnd(res.data.data.isEnd)
      // console.log(res.data.data.list)
    })
  },
  methods: {
    ...mapMutations(['UpdateInputValue', 'setDataList', 'modifyIsEnd']),
    // 点击进入详情页
    goDetails (item) {
      if(item.type===1){
        this.$router.push(`/c/${item.id}`)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
    .clearfix:after {
        content: "";
        display: block;
        overflow: hidden;
        visibility: hidden;
        width: 0px;
        height: 0px;
        clear: both;
    }
    *{
      margin:0;
      padding: 0;
    }
    ul{
      list-style:none;
       display: flex;
      justify-content: space-between;
      flex-wrap: wrap
    }
    a{
        text-decoration: none;
    }
    .selected{
      color: red!important;
    }
    .commoditiesList{
        width: 100%;
        background:#f5f5f5;
        margin-top:35px;
        margin-bottom:20px;
        li:nth-child(2n-1){
            // margin-right:10px;
        }
        li{
            float: left;
            box-sizing:border-box;
            width:50%;
            margin-top:10px;
            background: #ffffff;
            img{
                width:100%;
            }
            div{
                text-align:center;
                // padding:10px;
                color:#877a73;
                .title{
                    width: 100%;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow:ellipsis;
                    font-size:18px;
                }
                .token{
                    display: flex;
                    justify-content: space-between;
                    span{
                        display:block;
                        font-size:18px;
                    }
                    .skyCat{
                        background: #df2b2f;
                        border-radius:6px;
                        padding:4px 6px;
                        color: #fff;
                    }
                }
                .price{
                    color:red;
                    font-size:24px;
                    float:left;
                }
                .number{
                    display:flex;
                    justify-content:space-around;
                    margin-top:10px;
                    span{
                        display: block;
                    }
                    .coupon{
                        color:red;
                        border: 2px solid red;
                        padding:0px 4px;
                    }
                }
            }
        }

    }
</style>